<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:com="http://java.sun.com/jsf/composite/componentes"
	xmlns:f="http://java.sun.com/jsf/core">
<ui:composition>
	<p:dialog id="modalVisualizacao" widgetVar="modalVisualizacao"
		modal="true" header="#{appMessages['pontosColeta.visualizar.titulo']}"
		dynamic="true" width="1024" resizable="false">
		<h:panelGrid columns="2">
			<p:fieldset
				legend="#{appMessages['pontosColeta.cadastrar.dadosPonto']}"
				style="width: 350px;">
				<com:formOutput id="nome"
					label="#{appMessages['pontosColeta.nome']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.nome}" />
				</com:formOutput>

				<com:formOutput id="descricao"
					label="#{appMessages['pontosColeta.descricao']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.descricao}" />
				</com:formOutput>

				<com:formOutput id="pontoReferencia"
					label="#{appMessages['pontosColeta.pontoReferencia']}">
					<h:outputText
						value="#{pontosColetaBean.pontoColeta.pontoReferencia}" />
				</com:formOutput>

				<com:formOutput id="bacia"
					label="#{appMessages['pontosColeta.bacia']}">
					<h:outputText
						value="#{pontosColetaBean.pontoColeta.corpoHidrico.baciaHidrografica.nome}" />
				</com:formOutput>

				<com:formOutput id="cidade"
					label="#{appMessages['pontosColeta.cidade']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.cidade.nome}" />
				</com:formOutput>

				<com:formOutput id="corpoHidrico"
					label="#{appMessages['pontosColeta.corpoHidrico']}">
					<h:outputText
						value="#{pontosColetaBean.pontoColeta.corpoHidrico.nome}" />
				</com:formOutput>

				<com:formOutput id="latitude"
					label="#{appMessages['pontosColeta.latitude']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.latitude}" />
				</com:formOutput>

				<com:formOutput id="longitude"
					label="#{appMessages['pontosColeta.longitude']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.longitude}" />
				</com:formOutput>

				<com:formOutput id="altitude"
					label="#{appMessages['pontosColeta.altitude']}">
					<h:outputText value="#{pontosColetaBean.pontoColeta.altitude}">
						<f:convertNumber maxFractionDigits="3" minFractionDigits="3" />
					</h:outputText>
				</com:formOutput>
			</p:fieldset>

			<p:tabView id="tabMapa">

				<p:tab title="Mapa">
					<com:mapaPontoColeta renderMap="#{pontosColetaBean.mostrarMapa}"
						mapWidth="550" mapHeight="400"
						longitude="#{pontosColetaBean.pontoColeta.longitude}"
						latitude="#{pontosColetaBean.pontoColeta.latitude}"
						id="mapaVisualizacao" model="#{pontosColetaBean.marcadoresMapa}" />
				</p:tab>

				<p:tab title="Fotos"
					rendered="#{pontosColetaBean.pontoColeta.fotos.size > 0}">
					<p:galleria value="#{pontosColetaBean.pontoColeta.fotos}"
						var="image" filmstripPosition="top" showCaptions="true"
						rendered="#{pontosColetaBean.pontoColeta.fotos.size() > 0}">
						<p:graphicImage value="/image/#{image.idFoto}" />

					</p:galleria>
				</p:tab>

			</p:tabView>

		</h:panelGrid>
	</p:dialog>
</ui:composition>
</html>